<template>
	<div class="three">
	    <h1>three</h1>
		<button @click="flag='Come'">切换组件Come</button>
		<button @click="flag='Comf'">切换组件Comf</button>
		<component :is="flag"></component>
		{{arr}}
	</div>
</template>


<script>
import Come from "@/components/Come.vue";
import Comf from "@/components/Comf.vue";

export default {
  name: 'Three',
  data(){
	  return{
		flag:"Come",
		arr:[1,2,3]
	  }
  },
  components:{
	  Come,
	  Comf
  },
  mounted(){//给arr最后添加4---渲染结束了
     //1.方式一 不行
	 // this.arr[3]=4;
	 // console.log(this.arr);
	 
	 //2.方式二 ok
	 // this.arr[3]=4;
	 // this.$forceUpdate();//强制更新
	 
	 //3.方式三 ok
	 //this.$set(this.arr,3,400);
	 
	 //4.方式三 ok 数组重写的7大方法--都用了监听
	 //this.arr.push(401);
	 
	 this.$delete(this.arr,1);

  },
 //  beforeCreate(){//这个钩子，还没有data 不能
	// this.arr[3]=4;
	// console.log(this.arr);
 //  },
	 // created(){//有data,还没渲染  可以
		// this.arr[3]=4;
		// console.log(this.arr); 
	 // },
	 // beforeMount(){//有data,还没渲染  可以
	 // 	this.arr[3]=4;
	 // 	console.log(this.arr); 
	 // },
}
</script>

<style>
</style>